<script lang="ts" setup>
const events = reactive({
  left: 5,
  right: 5,
});
const timeLine = 20 % 2;

const colors = ref(["pink", "orangered", "skyblue", "lightgreen", "purple"]);
const linecolor = ref("pink");
const colorCheck = (c: string) => {
  linecolor.value = c;
};
</script>

<template>
  <div class="timeline">
    <div :class="['line_left', timeLine && 'border_r']">
      <div class="event_line" v-for="(e, i) in events.left" :key="i">
        <div class="date">2024年3月1日 星期五 多云</div>
        <div class="event">
          <span>
            今天有点烦躁，突然不想回到那个小屋。于是，在公司一直待到了十二点。
          </span>
        </div>
      </div>
    </div>
    <div class="middle_line">
      <div
        class="block"
        v-for="(c, inx) in colors"
        :key="inx"
        :style="`background: ${c}; top: ${60 * inx}px;`"
        @click="colorCheck(c)"
      ></div>
    </div>
    <div :class="['line_right', !timeLine && 'border_l']">
      <div class="event_line" v-for="(e, i) in events.right" :key="i">
        <div class="date">2024年3月2日 星期六 阴</div>
        <div class="event">
          <span> 今天啊。是该高兴还是难过呢？ </span>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.timeline {
  --color: v-bind(linecolor);
  display: flex;
  justify-content: center;
  .middle_line {
    position: fixed;
    width: 1px;
    height: 100vh;
    background: white;
    z-index: 99;
    .block {
      position: absolute;
      left: -9.5px;
      width: 20px;
      height: 40px;
      margin-top: 40px;
      background-color: orangered;
      clip-path: polygon(50% 0, 75% 25%, 60% 40%, 90% 60%, 50% 100%, 10% 60%, 40% 40%, 25% 25%);
      cursor: pointer;
    }
  }
  .line_left,
  .line_right {
    height: 100%;
    padding-bottom: 100px;
    .event_line {
      width: 300px;
      margin-top: 100px;
      .date {
        padding-bottom: 6px;
        color: #999;
        font-size: 12px;
      }
      .event {
        position: relative;
        padding: 10px;
        color: #333;
        text-indent: 2em;
        border-top: 2px solid var(--color);
        border-bottom-left-radius: 4px;
        border-bottom-right-radius: 4px;
        &::before {
          content: "";
          position: absolute;
          top: -60px;
          display: block;
          width: 126px;
          height: 60px;
          border-radius: 50%;
          border: 2px solid var(--color);
        }
      }
    }
  }
  .border_r {
    border-right: 6px solid var(--color);
  }
  .border_l {
    border-left: 6px solid var(--color);
  }
  .line_left {
    padding-right: 60px;

    .date {
      text-align: right;
    }
    .event {
      border-left: 2px solid var(--color);
      border-top-left-radius: 4px;
      box-shadow: 2px 2px 6px var(--color);
      &::before {
        right: -62px;
        clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
        // transform: rotateZ(150deg);
        // transform-origin: 100% 0;
      }
    }
  }
  .line_right {
    padding-left: 60px;
    padding-top: 80px;
    .event {
      border-right: 2px solid var(--color);
      border-top-right-radius: 4px;
      box-shadow: -2px 2px 6px var(--color);
      &::before {
        left: -62px;
        clip-path: polygon(50% 50%, 50% 100%, 0 100%, 0 50%);
        // transform: rotateZ(-150deg);
        // transform-origin: 0 0;
      }
    }
  }
}
</style>
